<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="input" />
    <input type="text" id="output" />
    <button id="copy">一键复制</button>
    <button id="paste">一键粘贴</button>

    <script>
      let str = 'Hello, world'
      const iptEle = document.querySelector('input')
      const optEle = document.querySelector('#output')
      iptEle.value = str

      const cpyBtn = document.querySelector('#copy')
      const patseBtn = document.querySelector('#paste')
      cpyBtn.addEventListener('click', function () {
        // 选中文本框
        iptEle.select()
        document.execCommand('copy')
      })

      patseBtn.addEventListener('click', function () {
        optEle.focus()
        document.execCommand('paste')
      })

      // Document.execCommand()方法虽然方便，但是有一些缺点。
      // 首先，它只能将选中的内容复制到剪贴板，无法向剪贴板任意写入内容。
      // 其次，它是同步操作，如果复制/粘贴大量数据，页面会出现卡顿。
      // 有些浏览器还会跳出提示框，要求用户许可，这时在用户做出选择前，页面会失去响应。
      // 为了解决这些问题，浏览器厂商提出了异步的 Clipboard API。
    </script>
  </body>
</html>
